import React, { useEffect, Fragment } from "react";
import { RouteComponentProps, useParams } from "react-router-dom";
import {
  Spin,
  Alert,
  Row,
  Col,
  DatePicker,
  Space,
  Divider,
  Typography,
  Anchor,
  Menu,
  Button,
} from "antd";
import { ShoppingCartOutlined } from "@ant-design/icons";
import { addShoppingCart } from "../../redux/shoopingCart/shoopingCartSlice";
import moment from "moment";
import locale from "antd/lib/date-picker/locale/zh_CN";
import "moment/locale/zh-cn";
import { ProductIntro, ProductComments } from "../../components";
import { MainLayout } from "../../layouts/mainLayout";
import { getProductDetail } from "../../redux/detailProduct/detailSlice";
import { useDispatch } from "react-redux";
import { commentMockData } from "./mockUp";
import { useSelector } from "../../redux/hooks";
import styles from "./DetailPage.module.css";
type MatchProps = {
  id: string | undefined;
};

export const DetailPage: React.FC<RouteComponentProps<MatchProps>> = (
  props
) => {
  moment.locale("zh-cn");
  const dispatch = useDispatch();
  const params = useParams<any>();
  const loading = useSelector((state) => state.productDetail.loading);
  const error = useSelector((state) => state.productDetail.error);
  const product = useSelector((state) => state.productDetail.data);
  const jwt = useSelector((s) => s.user.token);
  const shoppingCartLoading = useSelector((s) => s.shopingCart.loading);

  const { RangePicker } = DatePicker;

  // 添加购物车
  const addShoppingCartitems = () => {
    if (typeof jwt === "string") {
      dispatch(addShoppingCart({ jwt, touristRouteId: params.id }));
    }
  };

  useEffect(() => {
    dispatch(getProductDetail(params.id));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (loading) {
    return (
      <Spin
        size="large"
        tip="loading..."
        style={{
          marginTop: 200,
          marginLeft: "auto",
          marginBottom: 200,
          marginRight: "auto",
          width: "100%",
        }}
      />
    );
  }
  if (error) {
    return (
      <Alert
        message={error}
        type="error"
        description="数据请求出错，请检查接口配置"
        closable
      />
    );
  }
  if (product) {
    return (
      <Fragment>
        <MainLayout>
          <div className={styles["page-content"]}>
            {/* 产品简介与日期选择 */}
            <div className={styles["product-intro-container"]}>
              <Row>
                <Col span={12}>
                  <ProductIntro
                    title={product.title}
                    shortDescription={product.description}
                    price={product.originalPrice}
                    coupons={product.coupons}
                    points={product.points}
                    discount={product.price}
                    rating={product.rating}
                    pictures={product.touristRoutePictures.map((p: any) => p)}
                  />
                </Col>
                <Col span={12} style={{ left: "40px" }}>
                  <Space direction="vertical" size={12}>
                    <Button
                      style={{
                        marginTop: 50,
                        marginBottom: 30,
                        display: "block",
                      }}
                      type="primary"
                      danger
                      loading={shoppingCartLoading}
                      onClick={addShoppingCartitems}
                    >
                      <ShoppingCartOutlined />
                      加入购物车
                    </Button>
                    <RangePicker
                      locale={locale}
                      open
                      style={{ marginTop: 20 }}
                    />
                  </Space>
                  ,
                </Col>
              </Row>
            </div>
            {/* 锚点菜单 */}
            <div className={styles["product-detail-anchor"]}>
              <Anchor className={styles["product-detail-anchor"]}>
                <Menu mode="horizontal">
                  <Menu.Item key="1">
                    <Anchor.Link title="产品特色" href="#feature" />
                  </Menu.Item>
                  <Menu.Item key="2">
                    <Anchor.Link title="产品费用" href="#fees" />
                  </Menu.Item>
                  <Menu.Item key="3">
                    <Anchor.Link title="预定须知" href="#notes" />
                  </Menu.Item>
                  <Menu.Item key="4">
                    <Anchor.Link title="用户评价" href="#comments" />
                  </Menu.Item>
                </Menu>
              </Anchor>
            </div>
            {/* 产品特色 */}
            <div id="feature" className={styles["product-detail-container"]}>
              <Divider orientation="center">
                <Typography.Title level={3}>产品特色</Typography.Title>
              </Divider>
              {/* dangerouslySetInnerHTML: 防止xss注入攻击，直接渲染html元素  */}
              <div
                dangerouslySetInnerHTML={{ __html: product.features }}
                style={{ margin: 50 }}
              ></div>
            </div>
            {/* 产品费用 */}
            <div id="fees" className={styles["product-detail-container"]}>
              <Divider orientation="center">
                <Typography.Title level={3}>产品费用</Typography.Title>
              </Divider>
              {/* dangerouslySetInnerHTML: 防止xss注入攻击，直接渲染html元素  */}
              <div
                dangerouslySetInnerHTML={{ __html: product.fees }}
                style={{ margin: 50 }}
              ></div>
            </div>
            {/* 预定须知 */}
            <div id="notes" className={styles["product-detail-container"]}>
              <Divider orientation="center">
                <Typography.Title level={3}>预定须知</Typography.Title>
              </Divider>
              {/* dangerouslySetInnerHTML: 防止xss注入攻击，直接渲染html元素  */}
              <div
                dangerouslySetInnerHTML={{ __html: product.notes }}
                style={{ margin: 50 }}
              ></div>
            </div>
            {/* 产品评价 */}
            <div id="comments" className={styles["product-detail-container"]}>
              <Divider orientation="center">
                <Typography.Title level={3}>用户评价</Typography.Title>
              </Divider>
              <div style={{ margin: 40 }}>
                <ProductComments data={commentMockData}></ProductComments>
              </div>
            </div>
          </div>
        </MainLayout>
      </Fragment>
    );
  }
  return <></>;
};
